<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
    <el-dialog title="" :visible.sync="Show" :fullscreen='true' :show-close='false' append-to-body custom-class="fulldialog pointer-plan" :close-on-press-escape='false'>
        <!-- 自定义关闭按钮 -->
      <div class="dialog-header-wrap line-with-verticl">
        <div class="line-with-verticl"></div>
        <div class="dialog-header-handle">
          <div class="plantitle">{{buildinfo.bName}} · {{floor}}F</div>
          <div class="handle-tools">
            <div class="map-warning-num" v-show="isSelectMode&&deviceUnsign>0">
              <i class="icon-jinggao"><icon-svg icon-class="jinggao" style="fill: #f5a623" /> </i>{{deviceUnsign}}个设备未标记
            </div>
            <div class="map-listchange__mode"
                 :class="{'map-mode-select':isSelectMode}"
                 @click="changeMode('img')"
                 v-if="planSetup==1">
              <i class="icon-map-location">
                <icon-svg icon-class="viewimg" />
              </i>平面图模式
            </div>
            <div class="map-listchange__mode" :class="{'list-mode-select':!isSelectMode}" @click="changeMode('list')"><i><icon-svg icon-class="listview" /></i>列表模式</div>
            <div class="dialog-handle-items" @click="init"><i class="el-icon-refresh"></i></div>
            <div class="dialog-handle-items" @click="closeDialog"><i class="el-icon-close"></i></div>
          </div>
        </div>
      </div>
        <el-container>
            <el-header style="height: 0"></el-header>
            <el-main>
                <!-- 图片点显示 -->
                <div class="plan-imgbox" v-show="isSelectMode">
                    <div class="img-view-wrap" @mousewheel="mousewheel" v-loading="loading">
                        <div class="img-view-body" @mousedown.prevent="mousedown" ref="buildimgBox">
                            <img ref="buildimg" :src="urlimg" title="鼠标可拖动，缩放" v-show="urlimg">
                            <div class="sensor-pointer" v-for="item in sensorMarkers" :key="item.id" :style="{'left':item.positionSignX+'px','top':item.positionSignY+'px'}" :class="{'abnoraml':item.status==0||item.status==4,'alarm':item.status==1}">
                                <el-popover placement="top-end" width="250" trigger="click" @show="sensorStatus(item.id)" popper-class="mypopper">
                                    <div class="sensor-detail-box">
                                        <!--<div class="icon-type"></div>-->
                                        <div class="ss-header-box">
                                          <div class="ss-title" :title="markerInfo.equipmentType">{{markerInfo.equipmentType}}</div>
                                          <div class="ss-title" :title="markerInfo.sensorNo" style="color:rgba(255,255,255,.7)">{{markerInfo.sensorNo}}</div>
                                          <div class="ss-address">
                                            <i class="el-icon-location"></i>{{markerInfo.positionDescription}}
                                          </div>
                                          <div class="ss-datetime">
                                            <i class="el-icon-date"></i>{{markerInfo.date}}
                                          </div>
                                        </div>
                                        <div class="ss-status-list" v-loading="loading">
                                          <el-scrollbar style="height: 100%;">
                                            <p class="ss-status-title">实时状态：</p>
                                            <div class="no-list-text" v-if="markerInfo.alrmData&&markerInfo.alrmData.length<1">
                                              暂无数据
                                            </div>
                                            <div class="no-list-text" v-if="markerInfo.status&&markerInfo.status==='4'">
                                              设备离线，{{markerInfo.time}}无反馈
                                            </div>
                                            <div v-else v-for="(itemstatus,index) in markerInfo.alrmData" :key="index" class="ss-status-list__item">
                                              <span  class="color-pointer" :class="'status'+itemstatus.status"></span>
                                              <span v-if="itemstatus.measuringPoint" style="color:rgba(255,255,255,.7);">{{itemstatus.measuringPoint}}</span>
                                              <span v-if="itemstatus.type!==''">{{itemstatus.type}}</span>
                                              <span v-if="itemstatus.data">{{itemstatus.data}}</span>
                                            </div>
                                          </el-scrollbar>
                                        </div>
                                    </div>
                                    <span :style="{'color':item.color}" slot="reference">
                                        <div class="icon-sensor-dot" :class="{'dot-abnoraml':item.status==0||item.status==4,'dot-alarm':item.status==1}"></div>
                                        <svg-icon icon-class="checklocal" />
                                    </span>
                                </el-popover>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 列表模式 -->
                <div class="plan-listbox" v-show="!isSelectMode" style="height:calc(100vh - 66px);">
                    <el-row style="padding: 0 30px 24px 30px;height: 100%;">
                      <el-row style="height:28px;text-align: right;line-height: 28px;">状态
                        <el-select v-model="queryalamlist.status" placeholder="请选择" size="mini">
                          <el-option label="全部" value="-1"></el-option>
                          <el-option label="正常" value="2"></el-option>
                          <el-option label="报警" value="1"></el-option>
                          <el-option label="故障" value="0"></el-option>
                          <!--<el-option label="离线" value="4"></el-option>-->
                        </el-select>
                        <el-button type="primary" @click="searchByStatus" size="mini">查询</el-button>
                      </el-row>
                      <el-row style="margin-top: 32px;height:calc(100% - 66px)">
                        <el-scrollbar style="height:100%">
                        <el-table
                          :data="alrmtableData"
                          v-loading.body="alamLoading"
                          style="width: 100%">
                          <el-table-column
                            label="位置描述">
                            <template slot-scope="scope">
                              <span>{{scope.row.positionDescription}}</span>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="设备编号">
                            <template slot-scope="scope">
                              <span>{{scope.row.sensorNo}}</span>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="系列">
                            <template slot-scope="scope">
                              <span>{{scope.row.equipmentType}}</span>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="所属系统">
                            <template slot-scope="scope">
                              <span>{{scope.row.channelName}}</span>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="状态">
                            <template slot-scope="scope">
                              <span
                                :style="{color:scope.row.color}">{{scope.row.status}}
                              </span>
                            </template>
                          </el-table-column>
                          <el-table-column label="实时数据">
                              <template slot-scope="scope">
                                  <el-button type="text" @click="viewActionData(scope.row.id,scope.row.sensorNo,scope.row.equipmentType)">点击查看</el-button>
                              </template>
                          </el-table-column>
                        </el-table>
                      <el-footer>
                        <div class="pagination-container">
                          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryalamlist.page"
                            :page-sizes="[10,20,30,40]" :page-size="queryalamlist.limit" layout="total, sizes, prev, pager, next, jumper" :total="alamtotal">
                          </el-pagination>
                        </div>
                      </el-footer>
                      </el-scrollbar>
                      </el-row>
                    </el-row>
                </div>
                <!-- 左侧信息展示框 -->
                <div class="plan-pannel" :class="{'plan-pannel-close':isClosed}">
                  <el-scrollbar style="height: 100%;">
                    <div class="realtime-tabchange">
                      <el-radio-group v-model="radioInfo">
                        <el-radio-button label="radflooinfo" style="width: 35%">楼层信息</el-radio-button>
                        <el-radio-button label="radbuildinginfo" style="width: 35%">建筑信息</el-radio-button>
                      </el-radio-group>
                    </div>
                    <div class="realtime-change-content" v-show="radioInfo==='radflooinfo'">
                      <div class="wrap-with-halfboder"></div>
                      <!--设备统计-->
                      <div class="plan-statistics-table">
                        <div class="f-title"><i class="el-icon-caret-right"></i>设备统计</div>
                        <div class="device-static-chart" id="statistics_circle_nomalfloor"></div>
                        <div class="device-chart-box" v-show="deviceUnable>0">
                          <i class="icon-jinggao"><icon-svg icon-class="jinggao" style="fill: #f5a623" /> </i>{{deviceUnable}}个设备未启用
                          <el-button type="text" @click="viewUnableList('floorlist')">点击查看</el-button>
                        </div>
                      </div>
                        <!--传感器类别-->
                      <div class="pannel-sensor-list">
                        <el-scrollbar style="height: 100%;">
                          <div class="ps-title">
                            <i class="el-icon-caret-right"></i>传感器类别
                          </div>
                          <ul class="sensor-list" style="height: 100%;" v-loading="loading">
                            <li v-if="sensorTypelist&&sensorTypelist.length<1">
                              暂无传感器类别
                            </li>
                            <li v-else v-for="item in sensorTypelist" :key="item.type">
                              <div class="type-name">
                                <i :style="{'color':item.color}">
                                  <icon-svg icon-class="checklocal" />
                                </i>
                                {{item.type}}(个)
                              </div>
                              <div class="type-num" style="margin-right: 10px;">{{item.count}}</div>
                            </li>
                          </ul>
                        </el-scrollbar>
                      </div>
                      <!--楼层报警记录-->
                      <div class="plan-alarm-recorde">
                        <p class="ar-title"><i class="el-icon-caret-right"></i>报警记录</p>
                        <ul class="recorde-list" style="height:260px" v-loading="recoderloading">
                          <el-scrollbar style="height: 100%;">
                            <p v-if="abnormalList&&abnormalList.length<1">
                              暂无报警记录
                            </p>
                            <li v-else v-for="(item,index) in abnormalList" :key="index">
                              <div class="item-name">
                                        <span class="recorde-title" :title="item.equipmentType+'('+item.positionDescription+')'">
                                          <i><icon-svg icon-class="checklocal" style="fill: #FF3829;"/></i>
                                          {{item.equipmentType}}({{item.positionDescription}})
                                        </span>
                              </div>
                              <div class="item-date">
                                      <span v-if="item.unit" :title="item.unit">
                                        {{item.unit}}
                                      </span>
                                <span v-if="item.alrmType" :title="item.alrmType">
                                        {{item.alrmType}}
                                      </span>
                                <span v-if="item.measuringPoint">{{item.measuringPoint}}</span>
                                <span v-if="item.alrmData!==''&&item.dataUnit" :title="item.alrmData+''+item.dataUnit">{{item.alrmData+''+item.dataUnit}}</span>
                                <span v-if="item.alrmDate" :title="item.alrmDate">{{item.alrmDate}}</span>
                              </div>
                            </li>
                            <p style="text-align: center;" v-show="showMore">
                              <span @click="alarmList()" style="color:#50E3C2;font-size:14px;cursor:pointer">加载更多<i class="el-icon-arrow-down"></i></span>
                            </p>
                          </el-scrollbar>
                        </ul>
                      </div>
                    </div>
                    <div class="realtime-change-content" v-show="radioInfo==='radbuildinginfo'">
                      <div class="wrap-with-halfboder"></div>
                      <!--建筑信息-->
                      <div class="pannel-alarm-floor">
                        <div class="f-title"><i class="el-icon-caret-right"></i>报警楼层</div>
                        <div class="floor-list">
                          <i class="floor-list-icon">
                            <icon-svg icon-class="baojing" />
                          </i>
                          <span v-show="item.status==='1'" :class="{'type-wran':item.status==='1','type-abnormal':item.status==='0'}" v-for="item in abnormalFloor" :key="item.floor" @click="jumpFloor(item.floor)">{{item.floor}}F</span>
                        </div>
                        <div class="floor-list">
                          <i class="floor-list-icon">
                            <icon-svg icon-class="jinggao" style="fill: #f5a623" />
                          </i>
                          <span v-show="item.status==='0'" :class="{'type-wran':item.status==='1','type-abnormal':item.status==='0'}" v-for="item in abnormalFloor" :key="item.floor" @click="jumpFloor(item.floor)">{{item.floor}}F</span>
                        </div>
                      </div>
                      <!--设备统计图表-->
                      <div class="plan-statistics-table">
                        <div class="f-title"><i class="el-icon-caret-right"></i>设备统计</div>
                        <div class="device-static-chart" id="statistics_circle_nomal"></div>
                        <div class="device-chart-box" v-show="allDeviceUnable>0">
                          <i class="icon-jinggao"><icon-svg icon-class="jinggao" style="fill: #f5a623" /> </i>{{allDeviceUnable}}个设备未启用
                          <el-button type="text" @click="viewUnableList">点击查看</el-button>
                        </div>
                      </div>
                      <!--查看建筑详情-->
                      <div class="pannel-address">
                        <div class="f-title"><i class="el-icon-caret-right"></i>建筑详情</div>
                        <p>地址：{{buildinfo.bAddress}}</p>
                        <p>责任人：{{buildinfo.safeDutyName}}</p>
                        <p>电话：{{buildinfo.safeDutyPhone}}</p>
                        <el-button type="text" @click="showBuildInfo">更多详情<i class="el-icon-back" style="transform: rotate(180deg);"></i></el-button>
                      </div>
                    </div>
                    </el-scrollbar>
                    <div class="plan-close-btn" :class="{'plan-close-btn__close':isClosed}" @click="toggleClose">
                        <i class="el-icon-arrow-left"></i>
                    </div>
                </div>

                <!-- 楼层切换handler -->
                <div class="plan-handler" style="height:calc(100vh - 66px)">
                    <el-scrollbar style="height:100%">
                        <ul class="plan-floor-list">
                            <li class="plan-floor-item" :class="{'floor-breakdown':item.type=='0','floor-alarm':item.type=='1','floor-selected':item.floor==floor}" v-for="item in floorList" :key="item.floor" @click="jumpFloor(item.floor)">
                              <span v-if="item.type==='0'||item.type==='1'"><icon-svg icon-class="alamrecord"/></span>
                            {{item.floor}}F</li>
                        </ul>
                    </el-scrollbar>
                </div>
                <div class="real-scaleimg" v-show="isSelectMode">
                    <i class="el-icon-plus" style="color: #000000;padding: 1px;border-bottom: 1px solid #dddddd;" @click="scalebig"></i><br>
                    <i class="el-icon-minus" @click="scalesmall"></i>
                </div>
            </el-main>
            <BuildDetail :Show.sync="isShowBuildInfo" :infoId="infoId" :title="buildinfo.bName"/>
            <ActualData :Show.sync="isactiondata" :sensorid="sensorid" :attr2="channelId" :sensornum="sensornum" :sensortype="sensortype"></ActualData>
            <unabledList :Show.sync="isNotabledShow" :channelId="channelId" :buildingId="infoId" :floorId="floorunList"></unabledList>
        </el-container>
    </el-dialog>
</template>

<script>
  import echarts from 'echarts';
import {
  selectStatusCount,
  floorAlarm,
  getSensorCount,
  getAbnormalList,
  getBuildInfo,
  getFloor,
  getFloorSensors,
  selectAlrmSensorInfo,
  floorSensorStatus,
  viewByList,
  getUnsignCount
} from "@/api/device/realtimePoints/index";
import ActualData from "@/components/ActualData";
import BuildDetail from "@/components/BuildDetail";
import unabledList from "./notabledList";

export default {
  name: "planDialog",
  components:{ActualData,BuildDetail,unabledList},
  props: {
    Show: {
      required: true,
      default: false
    },
    channelId:{
      type: String,
      default: ""
    },
    buildId: {
      type: String,
      default: ""
    },
    newfloor:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
      deviceUnsign:'',
      isNotabledShow:false,
      radioInfo:'radflooinfo',
      deviceUnable:'',
      allDeviceUnable:'',
      sensorTypelist: [],
      abnormalList: [],
      abnormalFloor: [],
      buildinfo: {},
      markerInfo:{},
      showMore: false,
      floor:1,
      floorunList:'',
      page: 0,
      total: 0,
      multiple: 1,
      urlimg: "",
      imgWidth: null,
      isClosed: false,
      loading:false,
      alarmids: [],
      sensorMarkers: [],
      floorList: [],
      isSelectMode:true,
      alamtotal:0,
      queryalamlist:{
          page:1,
          limit:10,
          status:"2"
      },
      alrmtableData:[],
      alamLoading:false,
      recoderloading:false,
      sensorid:"",
      sensornum:"",
      sensortype:"",
      isactiondata:false,
      isShowBuildInfo:false,
      planSetup:"0",
      infoId:""
    };
  },
  methods: {
    renderChart(chartobj,ele){
    // 图表
      let chartnormal = echarts.init(document.getElementById(ele));
      let option = {
        legend: {
          orient: 'vertical',
          icon:'circle',
          right: '10',
          top:'center',
          textStyle: {
            color: 'rgba(80, 227, 194, 0.7)'
          },
          data:['正常','故障','报警'],
          color:['#50E3C2','#f5a623','#DB361D'],
        },
        tooltip : {
          trigger: 'item',
          formatter: "{b} ({d}%)"
        },
        color:['#50E3C2','#f5a623','#DB361D'],
        graphic:[
          {
            type:"text",
            left:"33%",
            top:"40%",
            style:{
              text:'设备数量',
              textAlign:"center",
              fill:"rgba(80, 227, 194, 0.3)",
              fontSize:12,
            }
          },
          {
            type:"text",
            left:"36%",
            top:"47%",
            style:{
              text:chartobj.normalCount+chartobj.faultCount+chartobj.callCount,
              textAlign:"center",
              fill:"#50E3C2",
              fontSize:26,
              fontFamily:'digital',
            }
          },
        ],
        series : [
          {
            name:'',
            type: 'pie',
            hoverAnimation:false,
            radius : ['50%','90%'],
            center: ['40%', '50%'],
            data:[
              {value:chartobj.normalCount, name:'正常'},
              {value:chartobj.faultCount, name:'故障'},
              {value:chartobj.callCount, name:'报警'},
            ],
            label:{
              show: true,
              position : 'inner',
              formatter: '{b}'+'{c}个'+'\n'+'{d}%',
            },
            itemStyle: {
              emphasis: {
                show:false,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      chartnormal.setOption(option);
    },
    jumpFloor(val) {
      //更新楼层信息
      this.floor = val;
      //更新分页信息
      this.page = 1;
     //  更新报警记录
      this.abnormalList = [];
      // 重新获取楼层图片传感器等信息

      //状态数量信息
      this.getStatusCount();
      this.getUnsignstat();
      this.getFloorStatusCount();
      //传感器类别列表
      this.getFloorSensNum();
      //报警记录列表
      this.page=0;
      this.alarmList();
      // 右侧楼层列表
      this.getFloors();
      if (this.isSelectMode) {
        this.changeMode("img");
      }else{
        this.changeMode("list");
      }
    },
    sensorStatus(sensorId){
        // 传感器的详细信息
        floorSensorStatus({sensorId:sensorId, channelId:this.channelId}).then((res)=>{
            this.markerInfo = res.data;
        })
    },
    getFloorSors(){
        this.loading = true;
        getFloorSensors({buildId: this.buildId, floor:this.floor, channelId:this.channelId}).then((res)=>{
            this.loading = false;
            this.urlimg = res.data.url;
            this.sensorMarkers = res.data.sensor;
            // 获取平面图宽度
            this.getImgWidth();
            //重置图片大小位置和坐标
           this.resetImgPos();
        })

    },
    resetImgPos(){
         let img = this.$refs.buildimg;
         img.style.width = 'auto';
            let imgbox = this.$refs.buildimgBox;
            imgbox.style.left = '50%';
            imgbox.style.top = '50%';
            this.rendermaker("big",1)
    },
    alarmList() {
      //报警记录
      this.recoderloading = true;
      this.page = this.page + 1;
      let cpage = this.page;
      getAbnormalList({
        buildId: this.buildId,
        channelId:this.channelId,
        floor: this.floor,
        page: cpage,
        limit: 10
      }).then(res => {
        this.recoderloading = false
        this.total = res.data.total;
        this.abnormalList = this.abnormalList.concat(res.data.rows);

        let totalPage = parseInt((this.total + 9) / 10);
        this.showMore = cpage - totalPage < 0;
      });
    },
    buildInfo() {
      getBuildInfo({ buildId: this.buildId, channelId:this.channelId }).then(res => {
        this.buildinfo = res.data;
      });
    },
    getFloors() {
      getFloor({ buildId: this.buildId, channelId:this.channelId }).then(res => {
        this.floorList = res.data;

        let orids = this.abnormalFloor;
        let alramids = orids;
        let listitem = this.floorList;
        for (let i = 0; i < listitem.length; i++) {
            listitem[i].type = "";
        for (let j = 0; j < alramids.length; j++) {
            if (listitem[i].floor == alramids[j].floor) {
              listitem[i].type = alramids[j].status;
            }
        }
        }
        this.floorList = listitem;
      });
    },
    getFloorAlarm(){
        //传感器报警楼层
      floorAlarm({ buildId: this.buildId, channelId:this.channelId }).then(res => {
        this.abnormalFloor = res.data;
        let response = res.data;
        let alarmids = [];
        response.forEach((floor)=>{
            alarmids.push(floor.floor)
        });
        this.alarmids = alarmids;
        if(alarmids.length>0){
          if (this.newfloor!==0) {
            this.floor = this.newfloor;
          }else{
            this.floor = alarmids[0];
          }
        }else{
          if (this.newfloor!==0) {
            this.floor = this.newfloor;
          }
        }

        //状态数量信息
        this.getStatusCount();
        //单个楼层标记状态统计
        this.getFloorStatusCount();
      // 单层
      //  未标记设备数量
        this.getUnsignstat();
      //传感器类别列表
      this.getFloorSensNum();
      //报警记录列表
      this.alarmList();
      // 右侧楼层列表
      this.getFloors();
      //默认为列表模式
      this.changeMode("list");
      });
    },
    getFloorSensNum(){
        //传感器类别
        this.loading = true;
         getSensorCount({buildId: this.buildId,floor: this.floor, channelId:this.channelId}).then(res => {
            this.loading = false;
            this.sensorTypelist = res.data;
        });
    },
    getStatusCount(){
        //整栋建筑的状态数量信息
      selectStatusCount({buildId: this.buildId, channelId:this.channelId}).then(res => {
        this.renderChart(res.data,'statistics_circle_nomal')
      });
    },
    getFloorStatusCount(){
      //单个楼层传感器状态数量信息
      selectStatusCount({buildId: this.buildId, floor: this.floor, channelId:this.channelId}).then(res => {
         this.renderChart(res.data,'statistics_circle_nomalfloor')
      });
    },
    getUnsignstat(){
      getUnsignCount({buildId: this.buildId, floor: this.floor, channelId:this.channelId}).then(res => {
         this.deviceUnsign = res.data.unlabeledCount;
         this.deviceUnable = res.data.notEnabledCount;
         this.allDeviceUnable = res.data.allNotEnabledCount;
      })
    },
    init() {
      //传感器报警楼层
      this.getFloorAlarm();
     //建筑物信息
      this.buildInfo();

      this.$store.dispatch("getImgAuth").then(()=>{
        this.planSetup=this.$store.getters.planSetup;
      });

      this.infoId=this.buildId;
    },
    closeDialog() {
      //当面板关闭(点击关闭按钮)
      this.$emit("update:Show", false);
    },
    getImgWidth() {
    //   if (this.imgWidth) {
    //     return;
    //   }
      let img = new Image();
      img.src = this.urlimg;
      img.onload = () => {
        this.imgWidth = img.width;
      };
    },
    mousedown(event) {
      let el = event.currentTarget;
      let disX = event.clientX - el.offsetLeft;
      let disY = event.clientY - el.offsetTop;
      document.onmousemove = e => {
        let l = e.clientX - disX;
        let t = e.clientY - disY;
        //移动当前元素
        el.style.left = l + "px";
        el.style.top = t + "px";
        return false;
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    mousewheel(e) {
      document.querySelector("#app").click();
      let delta = e.wheelDelta || -e.detail;

      delta > 0 ? this.scaleLarge() : this.scaleSmall();
      return false;
    },
    scalebig() {
      let img = this.$refs.buildimg;
      if (img.width / this.imgWidth > 3) {
        return false;
      }
      img.style.width = img.width * 1.2 + "px";
      this.rendermaker("big", 1.2);
    },
    scalesmall() {
      let img = this.$refs.buildimg;
      if (this.imgWidth / img.width > 3) {
        return false;
      }
      img.style.width = img.width / 1.2 + "px";
      this.rendermaker("small", 1.2);
    },
    scaleLarge() {
      let img = this.$refs.buildimg;
      let prw = img.width;
      //图片宽高
      if (this.imgWidth !== null && img.width / this.imgWidth <= 3) {
        img.style.width = (img.width * 1.2).toFixed(1) + "px";
        let crw = img.width;
        let rate = (crw / prw).toFixed(1);
        this.rendermaker("big", rate);
      } else {
        return false;
      }
    },
    scaleSmall() {
      let img = this.$refs.buildimg;
      let prw = img.width;
      //图片宽高
      if (this.imgWidth !== null && this.imgWidth / img.width <= 3) {
        img.style.width = (img.width / 1.2).toFixed(1) + "px";
        let crw = img.width;
        let rate = (prw / crw).toFixed(1);
        this.rendermaker("small", rate);
      } else {
        return false;
      }
    },
    rendermaker(type, rate) {
      let markers = this.sensorMarkers;
      if (type === "big") {
        markers.map(item => {
          item.positionSignX = (item.positionSignX * rate).toFixed(1);
          item.positionSignY = (item.positionSignY * rate).toFixed(1);
        });
      } else {
        markers.map(item => {
          item.positionSignX = (item.positionSignX / rate).toFixed(1);
          item.positionSignY = (item.positionSignY / rate).toFixed(1);
        });
      }
    },
    toggleClose() {
      this.isClosed = !this.isClosed;
    },
    viewUnableList(val){
    //  未启用列表
      this.floorunList = '';
      this.isNotabledShow = true;
      if (val==='floorlist'){
          this.floorunList = this.floor;
      }
    },
    getalamData(){
      this.alamLoading=true;
      viewByList( Object.assign({channelId:this.channelId,buildingId:this.buildId,floor:this.floor},this.queryalamlist)).then(res=>{
        this.alrmtableData=res.data.rows;
        this.alamtotal=res.data.total;
        this.alamLoading=false;
      }).catch(()=>{
        this.alamLoading=false;
      })
    },
    resetalamquery(){
      this.queryalamlist.page=1;
      this.queryalamlist.limit=10;
      this.queryalamlist.status="-1";
    },
    searchByStatus(){
      this.queryalamlist.page=1;
      this.queryalamlist.limit=10;
      this.getalamData();
    },
    changeMode(type){
        switch(type){
          case "img":
            this.urlimg = "";
            this.getFloorSors();
            this.isSelectMode=true;
          break;
          case "list":
            this.resetalamquery();
            this.getalamData();
            this.isSelectMode=false;
          break;
        }
    },
    handleSizeChange(val){
      this.queryalamlist.limit=val;
      this.getalamData();
    },
    handleCurrentChange(val){
      this.queryalamlist.page=val;
      this.getalamData();

    },
    viewActionData(id,num,type){
      //id是设备编号
      this.sensorid=id;
      this.sensornum=num;
      this.sensortype=type;
      this.isactiondata=true;
    },
    showBuildInfo(){
      this.isShowBuildInfo=true;
    }
  },
  mounted() {},
  watch: {
    Show(v) {
      if (v) {
        let self = this;
        this.$nextTick(() => {
          self.init();
        });
      } else {
        this.abnormalList = [];
        this.page = 0;
        this.floor = 1;
        this.changeMode("list");
        this.isClosed = false;
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
  .device-static-chart{
    width: 319px;
    height: 120px;
  }
  .plan-statistics-table{
    .s-container{
      padding-top: 10px;
    }
  }
.sensor-detail-box,.plan-handler,.plan-listbox,.recorde-list,.plan-pannel{
  .el-scrollbar__wrap{
    overflow-x: hidden;
  }
}
.drag-ele {
  height: 50px;
  width: 50px;
  border: 1px solid red;
  position: absolute;
  left: 0;
  top: 0;
}
.fulldialog {
  &.pointer-plan {
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        margin-left: 0;
      }
    }
    .pannel-alarm-floor,
    .pannel-sensor-list,
    .plan-alarm-recorde,
    .plan-statistics-table,
    .pannel-address {
      padding: 25px 20px;
      box-sizing: border-box;
    }
    .pannel-sensor-list {
      height: 230px;
    }
    .plan-alarm-recorde {
      min-height: 300px;
      .recorde-list {
        li {
          font-size: 12px;
        }
      }
    }
    .pannel-address {
      padding-top: 10px;
      p {
        margin: 0;
        line-height: 2.2;
      }
    }
    .plan-pannel {
      .plan-close-btn {
        z-index: 9;
        cursor: pointer;
        position: absolute;
        top: 39px;
        right: -4px;
        width: 22px;
        height: 0;
        border-top: 14px solid #50E3C2;;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        transform: rotate(90deg);
        .el-icon-arrow-left {
          color:#000;
          transform: rotate(-90deg) translateX(15px);
        }
      }
      &.plan-pannel-close {
        transform: translateX(-360px);
        transition: all 0.3s;
        .plan-close-btn {
          transform: rotate(-90deg) translateY(15px);
        }
      }
    }
    .custom-dialog-btn {
      position: absolute;
      font-size: 30px;
      left: 24px;
      top: 14px;
      color: #fff;
      &:hover {
        cursor: pointer;
      }
    }
    .el-header {
      padding: 0;
    }
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      .is-vertical {
        height: 100%;
      }
    }
    .plan-handler {
      margin-left: 10px;
      margin-right: 5px;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      .plan-floor-list {
        width: 57px;
        margin: 0;
        padding: 0;
        margin-right: 10px;
      }
    }
    .plan-imgbox {
      height: 100%;
      .img-view-wrap {
        position: absolute;
        left: 10px;
        top: 10px;
        bottom: 10px;
        right: 10px;
        overflow: hidden;
        .img-view-body {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
          overflow: hidden;
          cursor: pointer;
          img{
            cursor: move;
          }
          .sensor-pointer {
            position: absolute;
            color: #fff;
            width: 1px;
            height: 1px;
            &.abnoraml {
              color: #2d2f33;
            }
            &.alarm {
              color: red;
            }
            .svg-icon {
              position: absolute;
              font-size: 30px;
            }
          }
        }
      }
    }
  }
}
// 传感器hover css
.sensor-detail-box {
  font-size: 12px;
  padding-left: 10px;
  .ss-header-box{
    font-size: 14px;
  }
  .ss-status-list{
    height: 140px;
    .ss-status-list__item{
      line-height: 20px;
      span{
        padding: 0 5px;
        &:not(:first-child):not(:last-child){
          border-right: 1px solid #ddd;
        }
        &.status-item-title{
          border-left: 0;
          padding-left: 0;
        }
        &.color-pointer{
          color:#01A050;
          display: inline-block;
          width: 10px;
          height: 10px;
          vertical-align: middle;
          background: currentColor;
          clip-path: circle(14%);
          &.status0{
            color: #F5A623;
          }
          &.status1{
            color: #FF001F;
          }
          &.status4{
            color: #999;
          }
          &.status3{
            color: #F5A623;
          }
        }
      }
    }
  }
  .ss-status-title{
    margin: 0;
    padding: 8px 0;
  }
  .ss-title{
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .el-scrollbar__bar.is-horizontal{
    display: none;
  }
}
.real-scaleimg {
  background: #ffffff;
  position: absolute;
  bottom: 20px;
  right: 100px;
  cursor: pointer;
  border: solid 1px #d4d4d4;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.19);
  text-align: center;
}
.statistics-box {
  display: flex;
  padding: 8px 0;
  .statis-box-item{
    flex: 1;
    border-left: 1px solid #dfdfdf;
    &:first-child{
      border-left: 0;
    }
  }
  border-bottom: 1px solid #dfdfdf;
  p {
    margin: 0;
    text-align: center;
    line-height: 26px;
  }
  color: #000;
  .s-title {
    font-size: 14px;
  }
}
.mypopper{
    transform: translateX(17px);
}
@keyframes warn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(0);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.icon-sensor-dot{
  display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: transparent;
      color: transparent;
      position: absolute;
      left: 7px;
      top: 20px;
      &.dot-alarm {
        color: #ff0000;
        background: #ff0000;
      }
      &.dot-abnoraml {
        color: #f08719;
        background: #f08719;
      }
      &::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        left: -22px;
        top: -22px;
        border: 30px solid currentColor;
        border-radius: 30px;
        z-index: 0;
        opacity: 0;
        animation: warn 3s ease-out;
        animation-iteration-count: infinite;
      }
}
.floor-breakdown{
  span{
    color:#f08719;
  }
}
.floor-alarm{
  span{
    color:red;
  }
}
.img-left-bar{
  position: absolute;
  z-index:1;
  top: 24px;
  left:390px;
  height: 40px;
  float: left;
  display: flex;
.map-list-change{
      background: #fff;
      box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.19);
      border-radius: 1px;
      margin-right: 10px;
      font-size: 12px;
      color: #666;
      display: flex;
      align-items: center;
      padding: 0 10px;
      cursor: pointer;
      border: 1px solid #dddddd;
      .map-listchange__mode{
        padding: 10px 0;
        &:first-child{
          margin-right: 15px;
          .icon-map-location{
            font-size: 16px;
          }
        }
        &.map-mode-select{
          color: #2683F5;
        }
        &.list-mode-select{
          color: #2683F5;
          .class-icon-san{
            border-top: 2px solid #2683F5;
            border-bottom: 2px solid #2683F5;
            background: #2683F5;
            background-clip: content-box;
          }

        }
      }
      .class-icon-san {
        display: inline-block;
        width: 18px;
        vertical-align: middle;
        height: 2px;
        padding: 2px 0;
        border-top: 2px solid #999;
        border-bottom: 2px solid #999;
        background: #999;
        background-clip: content-box;
        box-sizing: content-box;
        margin-right: 5px;
      }
    }
  }
  .realtime-tabchange{
    .el-radio-group{
      width: 100%;
      .el-radio-button__inner{
        width: 100%;
      }
    }
  }
  .plan-listbox{
    width:calc(100% - 82px - 360px);
    margin-left:360px;
    height:100%;
  }
  .el-table th {
    background: #f5f7fa;
  }
  .item-date{
    height:17px;
    line-height: 17px;
    margin-left: 10px;
    width:95%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    span{
      padding: 0 5px;
      &:not(:last-child){
        border-right:1px solid #d1d1d1d1;
      }
    }
  }
</style>
